<template>
  <el-date-picker
    v-model="currValue"
    v-bind="options"
    type="date"
  />
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const currValue = ref('');

const init = () => {
  if (!props.compData?.dataSourceType) {
    loadValue();
  }
};

const options = computed(() => {
  const compStyle = props.compStyle || {};
  const data = {};
  visual.addIfNotNull(data, compStyle, 'size');
  visual.addIfNotNull(data, compStyle, 'placeholder');
  visual.addIfNotNull(data, compStyle, 'format');
  visual.addIfNotNull(data, compStyle, 'value-format');
  visual.addIfNotNull(data, compStyle, 'required');
  visual.addIfNotNull(data, compStyle, 'editable');
  visual.addIfNotNull(data, compStyle, 'clearable');
  visual.addIfNotNull(data, compStyle, 'disabled');
  return data;
});

const loadValue = async() => {
  const dataList = (await visual.loadData(props.compData, {}, {}, currNode.value)).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList);
  currValue.value = dataList.length > 0 && dataList[0]['内容'] || '';
};

watch(() => props.compStyle, () => {
  init();
}, {deep: true});

watch(() => props.compData?.refresh, () => {
  loadValue();
});

onMounted(() => {
  init();
  loadValue();
});
</script>